<template name="groupRule">
	<view class="groupInfo">
		<view class="priceBox">
			<text class="price">￥{{groupDt.course.price.toFixed(2)}}</text>
			<view class="djs" v-if="groupDt.leftSeconds>0">
				<text >{{djsText}}</text>
			</view>
		</view>
		<view class="fanli">
			<text>阶梯团</text>
			<view class="fanliBox">
				<text v-if="groupDt.num1">{{groupDt.num1}}人团返：￥{{groupDt.amount1}}/人</text>
				<text v-if="groupDt.num2">{{groupDt.num2}}人团返：￥{{groupDt.amount2}}/人</text>
				<text v-if="groupDt.num3">{{groupDt.num3}}人团返：￥{{groupDt.amount3}}/人</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	export default{	
		name:'groupRule',		//组件名称
		// 传递参数
		props:{
			groupDt:{
				type:Object,
				default:null
			}
		},
		// 组件参数
		data(){
			return {
				djsText: '距离结束 0天 00:00:00'
			}
		},
		// 组件方法
		methods:{
			daojishi(){
				let _now=new Date();
				let _end=new Date(Date.parse(this.groupDt.endTime.replace(/-/g, "/")));
				
				let _leftTime=_end.getTime()-_now.getTime();
				
				if(_leftTime>0){
					let _day= Math.floor(_leftTime/(1000*60*60*24));
					let _hour=Math.floor(_leftTime/(1000*60*60)%24);
					let _min= Math.floor(_leftTime/(1000*60)%60);
					let _sec= Math.floor(_leftTime/1000%60);
					_hour=_hour>9?_hour:'0'+_hour;
					_min=_min>9?_min:'0'+_min;
					_sec=_sec>9?_sec:'0'+_sec;
					this.djsText='距离结束 '+ _day + "天 " + _hour + ":" + _min + ":" + _sec;  
				}else{
					this.djsText='该活动已结束'
				}
				
			}
		},
		created() {
			setTimeout(() => {				
				this.daojishi();
			}, 1000);
		}
	}
</script>

<style lang="less" scoped>
	.groupInfo{
		background:linear-gradient(to right,#fa3074,#f86266);
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
		padding-bottom: 20upx;
		.priceBox{
			display: flex;
			padding: 10upx 20upx 10upx 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				font-size: 56upx;
				font-weight: bold;
			}
			.price:first-letter{
				font-size: 40upx;
			}
			.djs{
				font-size: 26upx;
				background-color: rgba(0,0,0,0.2);
				height: 40upx;
				border-radius: 20upx;
				line-height: 40upx;
				padding: 0 30upx;
				text:first-child{
					margin-right: 10upx;
				}
			}
		}
		.fanli{
			display: flex;
			padding: 0upx 80upx;
			>text{
				flex-shrink: 0;
				font-size: 28upx;
				font-weight: bold;
				margin-right: 20upx;
			}
			.fanliBox{
				display: flex;
				flex-direction: column;
				font-size: 28upx;
			}
		}
	}
</style>
